<template>
    <div id="no">
        <div class="four">大侠，你跑错地方了！</div>
        <div class="title">
            <span class="num">{{number}}</span>
            <span class="ppp">秒后自动返回......</span>
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                timer: null, // 初始定时器变量名为null
                number: 3,
            }
        },
        created() {
            this.end()
        },
        methods: {
            end() {
                this.timer = setInterval(() => {
                    this.number--
                    if (this.number == 0) {
                        clearInterval(this.timer)
                        this.timer = null // 这里最好清除一下，回归默认值
                        return this.$router.back()
                    }
                }, 1000)
            },
        },
    }
</script>

<style lang="scss" scoped>
    @font-face {
        font-family: electronicFont;
        src: url(../assets/font/fonts/DS-DIGIT.TTF);
    }
    #no {
        display: flex;
        flex-flow: wrap;
        width: 100%;
        height: 100vh;
        font-family: cursive;
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);

        .four {
            display: flex;
            width: 100%;
            justify-content: center;
            align-items: center;
            font-size: 48px;
            color: #606266;
            text-align: center;
        }
        .title {
            display: flex;
            width: 100%;
            text-align: center;
            font-size: 24px;
            justify-content: center;
            align-items: center;
            span[class='num'] {
                display: flex;
                width: 100px;
                height: 100px;
                font-size: 48px;
                margin: 0 20px;
                justify-content: center;
                align-items: center;
                font-family: electronicFont;
                border-radius: 50%;
                background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
            }
            span {
                vertical-align: middle;
            }
        }
    }
</style>

